import React from 'react'
import Chart from "react-apexcharts";
import {Card, CardHeader, UncontrolledTooltip} from "reactstrap";
import {HelpCircle} from "react-feather";

const Involvement = React.memo(props => {
  const data = {
    options: {
      chart: {},
      plotOptions: {
        radialBar: {
          size: 150,
          offsetY: 20,
          startAngle: -150,
          endAngle: 150,
          hollow: {
            size: "65%"
          },
          track: {
            background: props.white,
            strokeWidth: "100%"
          },
          dataLabels: {
            value: {
              offsetY: 30,
              color: "#99a2ac",
              fontSize: "2rem"
            }
          }
        }
      },
      colors: [props.danger],
      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: [props.primary],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        dashArray: 8
      },
      labels: ["Среднее за день"]
    },
    series: [props.data]
  }

  return (
    <Card className="analytics-card">
      <div className="analytics-card__header">
        <CardHeader className="p-0">
          <div className="analytics-card__title">Вовлеченность</div>
          <HelpCircle size={20} className="cursor-pointer text-muted" id="involvement-card__help-icon"/>
          <UncontrolledTooltip style={{
            backgroundColor:'#6F64F8',
            width: '100%',
            maxWidth: '400px'
          }} placement="left" target="involvement-card__help-icon">
            <h4 className="text-center">Engagement Rate</h4>
            <p className='font-medium-1 text-left'>Engagement Rate, или коэффициент вовлеченности – это метрика, разработанная сервисом SocialBakers, и уже
              ставшая стандартом для оценки эффективности контентой политики и коммуникации на площадке.</p>
            <h4 className="text-center">Формула расчета</h4>
            <p className="text-center font-medium-1">ER% = (Активности/подписчики)*100%</p>
          </UncontrolledTooltip>
        </CardHeader>
      </div>
      <div className="involvement-card__content">
        <div className="involvement-card__chart">
          <Chart
            options={data.options}
            series={data.series}
            type="radialBar"
            height={300}
            className="support-tracker-card"
          />
        </div>
      </div>
    </Card>
  )
})

export default Involvement
